html {
  font-family: "Hind Siliguri", sans-serif;
  scroll-behavior: smooth;
  background-color: white;
}

body {
  padding: 0px;
  margin: 0px;
}

div {
  box-sizing: border-box;
  text-align: center;
}

li {
  text-align: left;
}

p {
  text-align: left;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
}

textarea {
  font-family: "Hind Siliguri", sans-serif;
  position: absolute;
  top: 50px;
  font-size: 16px;
  resize: none;
}

label {
  position: absolute;
  font-weight: 600;
  font-size: 17px;
}

input {
  position: absolute;
  top: 50px;
  height: 30px;
  font-size: 16px;
}

.headerDiv {
  background-color: white;
  width: 100%;
  height: max-content;
  box-sizing: border-box;
  align-self: top;
  height: 70px;
  margin: 0px;
  padding: 0px;
}

.headerTextH1 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 60px;
  font-weight: normal;
  color: black;
  margin: 0px;
}

.projectTextH1 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 60px;
  color: black;
  margin: 0px;
}

.pageHeader {
  font-family: "Hind Siliguri", sans-serif;
  text-decoration: underline;
  font-size: 50px;
  padding-left: 10px;
}

.mainPageLinksDiv {
  font-family: "Roboto Condensed", sans-serif;
  background-color: white;
  min-height: 50px;
  height: max-content;
  line-height: 50px;
  top: -1px;
  width: 100%;
  display: block;
}

.mainPageRow {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.mainPageColumn {
  flex: 17%;
  padding: 0 4px;
}

.mainPageColumn img {
  margin-top: 8px;
  vertical-align: middle;
}
.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
}

.currentPage {
  font-size: 20px;
}

.mainPageLinks {
  white-space: nowrap;
  text-decoration: none;
  color: rgb(45, 45, 66);
  padding-left: 10px;
  padding-right: 10px;
}

.tutorialLink {
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-decoration: none;
  color: #e9d1c7;
}

.gifColumn {
  display: block;
  justify-content: right;
  align-items: center;
  flex: 1 0 34%;
}

.gifColumn p{
    text-align: center;
    width: 100%;
}

.gif {
  width: 90%;
  margin-top: 5%;
  height: auto;
  object-fit: cover;

}


.gifInfoColumn {
  display: flex;
  align-items: center;
  flex: 1 0 66%;
  height: 100%;
}

.gifInfo {
  text-align: left;
  font-weight: bold;
  vertical-align: middle;
  font-size: 20px;
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 10%;
  margin-bottom: 40px;
}

.contactInfo {
  text-align: center;
  margin-right: 10%;
  margin-left: 10%;
}

.container {
  width: 100%;
  height: max-content;
  display: flex;
  flex-wrap: wrap-reverse;
}

.itemLeft {
  flex: 1 0 34%;
  padding-left: 40px;
  padding-right: 40px;
  float: left;
}

.itemRight {
  flex: 1 0 66%;
}

.mainPageItemMiddle {
  flex: 1 0 33%;
  float: middle;
}

.mainPageItemRight {
  flex: 1 0 33%;
  float: right;
}

.email {
  font-size: 25px;
}

.ciros {
  background: url("Images/Nilvor.png") no-repeat;
}

.ciros:hover {
  background: url("Images/NilvorAlt.png") no-repeat;
}

.ramp {
  background: url("Images/Ramps.png") no-repeat;
}

.ramp:hover {
  background: url("Images/RampsAlt.png") no-repeat;
}

.territorial {
  background: url("Images/Territorial.png") no-repeat;
}

.territorial:hover {
  background: url("Images/TerritorialAlt.png") no-repeat;
}

.lemon {
  background: url("Images/JohnLemon.png") no-repeat;
}

.lemon:hover {
  background: url("Images/JohnLemonAlt.png") no-repeat;
}

@media screen and (max-width: 1000px) {
  .gifColumn {
    flex: 1 0 50%;
  }

  .gifInfoColumn {
    flex: 1 0 50%;
  }

  .itemLeft {
    flex: 1 0 50%;
    padding-left: 30px;
    padding-right: 30px;
  }

  .itemRight {
    flex: 1 0 50%;
  }
}

@media screen and (max-width: 800px) {
  .contactInfo {
    font-size: 17px;
    margin-bottom: 50px;
  }

  .email {
    font-size: 20px;
  }
}

@media screen and (max-width: 725px) {
  .gifColumn {
    justify-content: center;
    flex: 1 0 100%;
  }

  .gifInfoColumn {
    flex: 1 0 100%;
  }

  .gif {
    float: none;
    margin-top: 50px;
  }

  .gifInfo {
    text-align: none;
    display: inline-table;
    float: top;
    max-width: 600px;
    font-size: unset;
    margin-top: 0;
    margin-left: 20px;
    margin-right: 20px;
  }

  .itemLeft {
    flex: 1 0 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .itemRight {
    flex: 1 0 100%;
  }

  .mainPageLinksDiv {
    line-height: 30px;
  }

  .itchText {
    font-size: 14px;
  }
}

@media screen and (max-width: 450px) {
  .email {
    font-size: 16px;
  }

  .tutorialLink {
    bottom: -3px;
    font-size: 12px;
  }
}

@media screen and (max-width: 400px) {
  .email {
    font-size: 13px;
  }
}

.base {
  height: 30px;
  width: 100%;
  background-color: black;
}

.impactImage {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.contactPageImageDiv img {
  float: left;
  object-fit: cover;
  width: 33.33333%;
  height: 100vh;
}

.smallImageMain {
  object-fit: cover;
  object-position: 50% 0%;
  width: 80%;
  height: 400px;
  min-height: 250px;
}

.smallImage {
  object-fit: cover;
  object-position: 50% 0%;
  width: 90%;
  min-height: 250px;
  margin-bottom: 20px;
}

.blackBorder {
  margin-bottom: 20px;
  border-style: solid;
  border-color: black;
}

.greyBackground {
  background-color: #869197;
}

.darkGreenBackground {
  background-color: #456231;
}

.darkGreenBackground a {
  color: #a2b098;
}

.darkPinkBackground {
  background-color: #3B4131;
  color: #eceeea;
}

.darkPinkBackground a {
  color: #3B4131;
}

.darkPinkBackground strong {
  color: #e4f0d1;
  text-shadow: -1px -1px 0 #69002A , 1px -1px 0 #69002A, -1px 1px 0 #69002A, 1px 1px 0 #69002A;
}

.grayBackground {
  background-color: #b0a3a2;
}

.grayBackground a {
  color: #5e5656;
}

.purpleBackground {
  background-color: #584652;
}

.purpleBackground a {
  color: #dac6d2;
}

.greenBackground {
  background-color: #42715f;
}

.greenBackground a {
  color: #b3c6bf;
}

.lightGreenBackground {
  background-color: #7ea37d;
}

.lightGreenBackground a {
  color: #c2d1b6;
}

.lightRedBackground {
  background-color: #d4a38f;
}


.beigeBackground {
  background-color: #857058;
}

.beigeBackground a {
  color: #d1bda4;
}

.projectDivider {
  height: 60px;
  width: 100%;
  background-color: orange;
}

.hidden {
  opacity: 0;
}

.stackTop {
  z-index: 2;
}

.expandableDiv {
  background-color: black;
  height: 40px;
  padding: 0px 0px 10px 0px;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    animation: fade-in 1.5s 1;
    animation-fill-mode: forwards;
  }
}

@keyframes fade-in {
  100% {
    opacity: 1;
  }
}